<template>
    <div class="game-card-10300">
        <div class="box">
            <img :src="detail.gameList[0].cover" alt="">
            <div class="wrap">
                <div class="title">{{detail.gameList[0].title}}</div>
                <!-- <div class="total">玩过n款 / 共10款</div> -->
                <div class="total">{{detail.gameList[0].subTitle}}</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'model10300',
    props: ['data'],
    data () {
        return {
            detail: {
                label: '',
                title: '',
                subTitle: '',
                gameList: [
                    {
                        title: '',
                        subTitle: ''
                    }
                ]
            }
        }
    },
    created () {
        if (this.data) {
            this.detail.label = this.data.label
        }
        if (this.data && this.data.elements && this.data.elements.length) {
            this.detail = this.data
        }
    },
    watch: {
        data: {
            handler: function (val) {
                if (val) {
                    this.detail.label = val.label
                }
                if (val && val.elements && val.elements.length) {
                    this.detail = val
                }
            },
            deep: true
        }
    }
}
</script>

<style lang="scss">
    .game-card-10300 {
        padding: 16px;
        border-bottom: 1px solid rgba(228,228,228,1);
        .box {
            position: relative;
            height: 328px;
            border-radius:8px;
            overflow: hidden;
            background-color: #ddd;
            background-size: 100% 100%;
            > img {
                width: 100%;
                height: 100%;
            }
            .wrap {
                padding: 8px 16px 0;
                position: absolute;
                bottom: 0;
                left: 0;
                z-index: 1;
                width: 100%;
                height: 84px;
                .title {
                    height:42px;
                    font-size:16px;
                    font-family:SourceHanSansCN-Medium,SourceHanSansCN;
                    font-weight:500;
                    color:rgba(255,255,255,1);
                    line-height:20px;
                    overflow: hidden;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    display: -webkit-box;
                }
                .total {
                    font-size:11px;
                    font-family:SourceHanSansCN-Regular,SourceHanSansCN;
                    font-weight:400;
                    color:rgba(255,255,255,1);
                }
            }
        }
    }
</style>
